<template>

  <div class="home">
    <el-container>
      <el-aside :width="isCollapse ? 'auto' : '200px'">
        <Aside />
      </el-aside>
      <el-container>
        <el-header>
          <Header />
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { provide, ref } from "vue";
import Aside from "./compoment/Aside.vue";
import Header from "./compoment/Header.vue";

import { getRouterApi } from "@/http/api/index";
getRouterApi();
// 在父组件定义一个 控制是否收起菜单的变量
const isCollapse = ref(false);
// 使用注入
provide("isCollapse", isCollapse);
</script>

<style lang="less" scoped>
.home {

  height: 100%;


  :deep(.el-header) {
    background-color: #fff;
  }

  :deep(.el-aside),
  :deep(.el-main) {
    height: calc(100vh - 60px);
    // 控制容器的滚动条的样式
    &::-webkit-scrollbar {
      width: 0;
    }
  }


  :deep(.el-aside) {
    height: 100vh;
    background-color: #304156;
  }

  :deep(.el-menu) {
    border: 0;
  }

    .menu_header {
        width: (100vw - 13px)
    }
}
</style>
